<template>
  <view :class="['base-card', { 'is-hoverable': hoverable, 'is-shadow': shadow }]" :style="cardStyle">
    <!-- 卡片头部 -->
    <view v-if="$slots.header || title || subtitle" class="card-header">
      <slot name="header">
        <view v-if="title || subtitle" class="card-header-content">
          <text v-if="title" class="card-title">{{ title }}</text>
          <text v-if="subtitle" class="card-subtitle">{{ subtitle }}</text>
        </view>
      </slot>
      <view v-if="$slots.extra" class="card-extra">
        <slot name="extra"></slot>
      </view>
    </view>
    
    <!-- 卡片内容 -->
    <view class="card-content" :style="contentStyle">
      <slot></slot>
    </view>
    
    <!-- 卡片底部 -->
    <view v-if="$slots.footer" class="card-footer">
      <slot name="footer"></slot>
    </view>
  </view>
</template>

<script>
export default {
  name: 'BaseCard',
  props: {
    // 卡片标题
    title: {
      type: String,
      default: ''
    },
    // 卡片副标题
    subtitle: {
      type: String,
      default: ''
    },
    // 是否可悬浮（有悬停效果）
    hoverable: {
      type: Boolean,
      default: false
    },
    // 是否有阴影
    shadow: {
      type: Boolean,
      default: true
    },
    // 内边距（支持传入自定义内边距）
    padding: {
      type: [String, Number],
      default: ''
    },
    // 背景色
    background: {
      type: String,
      default: ''
    },
    // 边框半径
    borderRadius: {
      type: [String, Number],
      default: ''
    }
  },
  computed: {
    cardStyle() {
      const style = {};
      
      if (this.background) {
        style.background = this.background;
      }
      
      if (this.borderRadius) {
        const radius = isNaN(Number(this.borderRadius)) 
          ? this.borderRadius 
          : `${this.borderRadius}rpx`;
        style.borderRadius = radius;
      }
      
      return style;
    },
    contentStyle() {
      if (this.padding !== '') {
        const padding = isNaN(Number(this.padding)) 
          ? this.padding 
          : `${this.padding}rpx`;
        return { padding };
      }
      return {};
    }
  }
}
</script>

<style lang="scss">
@import '@/styles/variables.scss';
@import '@/styles/mixins.scss';

.base-card {
  background: $bg-white;
  border-radius: $border-radius-lg;
  overflow: hidden;
  position: relative;
  margin-bottom: $spacing-md;
  
  &.is-shadow {
    box-shadow: $shadow-base;
  }
  
  &.is-hoverable {
    transition: all $transition-base $transition-ease;
    
    &:active {
      transform: translateY(-6rpx);
      box-shadow: $shadow-md;
    }
  }
}

.card-header {
  @include flex-between;
  padding: $spacing-lg;
  border-bottom: 1px solid $border-color-light;
}

.card-header-content {
  @include flex-column;
}

.card-title {
  font-size: $font-size-md;
  font-weight: $font-weight-bold;
  color: $text-primary;
  margin-bottom: 4rpx;
}

.card-subtitle {
  font-size: $font-size-sm;
  color: $text-tertiary;
}

.card-extra {
  display: flex;
  align-items: center;
}

.card-content {
  padding: $spacing-lg;
}

.card-footer {
  padding: $spacing-lg;
  border-top: 1px solid $border-color-light;
}
</style>
